<template>
  <div class="newProject">
    <div class="header">
      <van-nav-bar title="新建项目" left-text="返回" left-arrow @click-left="onClickLeft" />  
    </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        基本信息
      </van-divider>
      <van-form @submit="onSubmit">
      <van-field
        v-model="projectName"
        name="projectName"
        label="项目名"
        placeholder="请输入项目名"
        :rules="[{ required: true, message: '请输入项目名' }]"
      />
     <van-field v-model="signdate"
                    name="createTime"
                    placeholder="请选择签订日期"
                    label="签订日期"
                    :rules="[{ message: '请选择日期' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showTime = true" type="primary">选择时间</van-button>
                    </template>
        </van-field>
        <van-field v-model="selectCity"
                    name="selectCity"
                    placeholder="请选择城市"
                    label="选择城市"
                    :rules="[{ message: '请选择城市' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showCity = true" type="primary">选择城市</van-button>
                    </template>
        </van-field>
        <van-field
        v-model="detailedAddress"
        name="detailedAddress"
        label="详细地址"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
      <van-field v-model="personInCharge"
                    name="personInCharge"
                    placeholder="选择负责人"
                    label="负责人"
                    :rules="[{ message: '请选择负责人' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showPerson = true" type="primary">选择负责人</van-button>
                    </template>
        </van-field>
         <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        业主信息
      </van-divider>
      <van-field
        v-model="owner"
        name="owner"
        label="业主"
        placeholder="请输入业主"
        :rules="[{ required: true, message: '请输入业主' }]"
      />
      <van-field
        v-model="ownerAddress"
        name="ownerAddress"
        label="业主地址"
        placeholder="请输入业主地址"
        :rules="[{ required: true, message: '请输入业主地址' }]"
      />
      <van-field
        v-model="ownerPhone"
        name="ownerPhone"
        label="联系电话"
        placeholder="请输入联系电话"
        :rules="[{ required: true, message: '请输入联系电话' }]"
      />
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        备注信息
      </van-divider>
      <van-field
        v-model="remarks"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        maxlength="50"
        placeholder="请输入备注"
        show-word-limit
      />
      <van-button type="primary" size="large"
      :style="{backgroundColor:'#1989fa'}"
      round
      >提交</van-button>
</van-form>
<!-- 选择时间 -->
<van-calendar v-model="showTime" @confirm="timePickEvt" />
     
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      projectName:'',          //项目名
      signdate:'',              //选择签订时间
      selectCity:'',          //选择城市
      detailedAddress:'',      //详细地址
      personInCharge:'',      //选择负责人
      owner:'',               //业主信息
      ownerAddress:'',        //业主地址
      ownerPhone:'',          //业主电话
      remarks:'',             //备注
      showTime:false
    }
  },
  methods:{
    onClickLeft(){
      this.$router.push('/main')
    },
    //点击选择时间
    timePickEvt(date) {
            this.signdate = moment(date).format('yyyy-MM-DD')
            this.showTime = false
        },
    onSubmit(values){
      console.log(values);
    }
    
  }
}
</script>

<style lang='less' scoped>
  .van-hairline--bottom {
  background-color: #6199ff;
}
.header/deep/ .van-nav-bar__arrow,
.header/deep/ .van-nav-bar__text,
.header/deep/ .van-nav-bar__title {
  color: #F2F2F2 !important;
  font-size: 20px;
}
</style>